<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #one,#two,#three{
            width: 100px;
            height: 100px;
        }
         div{
             width: 30px;
             height: 15px;
         }

    </style>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>
        $(function (){
            //1、dom对象
            //原生js选择器获取到的对象
            //特点：只能通过dom方法或者属性，不能调用jQuery的属性或者方法
            // document.getElementById("");
            // document.getElementsByTagNameNS("");
            // document.getElementsByClassName("")
            // let div1=document.getElementById("one")
             // div1.style.backgroundColor="red";//只能通过dom方法或者属性，
            // div1.css('backgroundColor','green');//不能调用jQuery的属性或者方法

            //2、jQuery对象
        //    利用jQuery对象选择器获取到的对象
        //    特点：只能调用jQuery的属性或者方法，不能通过jsdom对象的方法或者属性，
        //    3、jQuery对象时长什么样
        //    jQuery对象是一个伪数组，jQuery对象其实就是dom对象的一个包装集
        //     var  $divs=$('#one,#two,#three');
        //     console.log($divs);
        //
            //4.dom对象转换成jQuery对象
           // let div1=document.getElementById("two");
           //  var $div1=$(div1);
           //  console.log($div1)

        //    5、jQuery对象转换成dom对象
        //     第一种：使用下标来取出来
           var $divs=$('div');
            var  div2=$divs[3];
            //  div2.style.backgroundColor="red";
            // console.log(div2);
            // 第二种：使用jQuery的方法 get();
            var  div3=$divs.get(5);
            div3.style.backgroundColor="red";
            console.log(div3);
        });
    </script>
</head>
<body>
<div id="one">
    <div class="one_one"></div>
    <div class="one_one"></div>
</div>
<div id="two">
    <div ></div>
    <div></div>
</div>
<div id="three">
    <div></div>
    <div></div>
</div>
</body>
</html>